<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
 xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>更改</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"  media="all">
  <style>
  .layui-input, .layui-textarea {
    display: block;
    width: 70%;
    padding-left: 10px;
 }
 	.layui-select-title input{
 		width: 100%;
 	}
  </style>
</head>
<body>
<blockquote class="layui-elem-quote">
编辑
</blockquote>
<form class="layui-form" action="" lay-filter="roleEdit">
   <input type="hidden" name="id" id="id">
  <div class="layui-form-item">
    <label class="layui-form-label">角色名称</label>
    <div class="layui-input-block">
      <input type="text" name="roleName" lay-verify="roleName" autocomplete="off" placeholder="请输入栏目名称" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" style="width: 76%">
    <label class="layui-form-label">权限栏目</label>
    <div class="layui-input-block" >
      <div id="menuTree" lay-verify="menuTree" name="menuId"></div> 
<!--       </br><div style="font-size: 10px">添加一级栏目可不用选择</div> -->
    </div>
  </div>
   <shiro:hasPermission name="sysRole:edit">
	  <div class="layui-form-item" shiro:hasPermission="sysRole:edit">
	    <div class="layui-input-block">
	      <button type="submit" class="layui-btn" lay-submit="" lay-filter="roleSubmit">立即提交</button>
	      <button type="button" class="layui-btn layui-btn-primary" id="cancelButton">取消</button>
	    </div>
	  </div>
   </shiro:hasPermission>
</form>
<script th:src="@{/static/js/jquery-2.1.4.min.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:inline="javascript">
window.onload = function(){
    var sysRole=[[${sysRole}]];
    var menuId=[[${menuId}]];
    console.info(menuId);
    var data,roleName;
    if(sysRole!=null){
    	roleName=sysRole.roleName;
    	data={
    		"id":sysRole.id
           ,"roleName":roleName
    	}
    }
	layui.use(['form', 'layedit', 'laydate','tree','util'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,layedit = layui.layedit
	  ,tree=layui.tree
	  ,util = layui.util
	  ,laydate = layui.laydate;
	  //表单赋值
	  form.val("roleEdit",data);
	  var $ = layui.jquery;
	  var tree = layui.tree;
	  //创建一个编辑器
	  var editIndex = layedit.build('LAY_demo_editor');
	  //自定义验证规则
	  form.verify({
		  roleName: function(value){
	      if(value.length <= 0){
	        return '不能为空';
	      }
	    }
	    ,menuTree: function(value){
	    	 var checkedData =tree.getChecked('checkId');
	    	 if(checkedData.length==0){
	    		 return "请选择权限栏目";
	    	 }
	    }
	  });
	  //属性结构
	  //仅节点左侧图标控制收缩  一级栏目不提供所属
	  tree.render({
		    elem: '#menuTree'
		    ,data: getMenuData()
		    ,showCheckbox: true  //是否显示复选框
		    ,spread:true  //设置默认展开
		    ,id:'checkId'  //定义索引
	   });
	  if(menuId!=null){
		  var checkTree=Object.values(menuId.split(','));
		  console.info(checkTree);
		  tree.setChecked('checkId',checkTree); //树形回显
	  }
	  function getMenuData(){
		    var data = [];
		    $.ajax({
		        url: "/user/sysMenu/getMenuTree.html",    //后台数据请求地址
		        type: "post",
		        async:false,
		        data:{startLevel:2,endLevel:4},
		        dataType:"json",
		        success: function(result){
		            data = result;
		        }
		    });
		    return data;
		}

	  form.render('checkbox');
	  
	  function closeIframe(){
		  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		  parent.layer.close(index)
	  }
	  //监听取消
	  $("#cancelButton").click(function(){
		  closeIframe();
	  })
	  //监听提交
	  form.on('submit(roleSubmit)', function(data){
		  var checkedData = tree.getChecked('checkId');
		  var roleData=JSON.stringify(checkedData);
		  data.field.menuId=roleData;
		  $.ajax({
			  url:"/user/sysRole/add.html",
			  type:"POST",
			  async:false,
		  	  data:data.field,
		  	  success:function(result){
		  		  console.info(result.code);
		  		  if(result.code==200){
		  			  layer.msg(result.message, {icon: result.icon});
		  			  closeIframe();//关闭弹框
		  			  window.parent.location.reload();//刷新父页面
		  		  }else{
		  			  layer.msg(result.message, {icon:result.icon});
		  		  }
		  	   }
		    })
	  });
	});
}	
</script>
</body>
</html>